import { useLocation, useNavigate, useRoutes } from 'react-router-dom'
import routes from '@/router'
import { useEffect } from 'react'
import { message } from 'antd'

/*
后台管理系统两种经典的跳转情况：
1、如果访问的是登录页面， 并且有token， 跳转到首页
2、如果访问的不是登录页面，并且没有token， 跳转到登录页
3、其余的都可以正常放行
*/

// 路由守卫
const BeforeRouterEnter = () => {
  const oulet = useRoutes(routes)
  const navgateTO = useNavigate()

  // 1. 拿到访问地址和 token
  const location = useLocation()
  let token = localStorage.getItem('token')

  // 2. 组件加载完毕进行判断
  useEffect(() => {
    // 3. 如果访问的是登录页面， 并且有token， 跳转到首页
    if (location.pathname === '/login' && token) {
      message.success('您已经登录！')
      // 进行跳转
      return navgateTO('/page')
    }
    // 4. 如果访问的不是登录页面，并且没有token， 跳转到登录页
    if (location.pathname !== '/login' && !token) {
      message.error('您还未登录！')
      // 进行跳转
      return navgateTO('/login')
    }
  })

  // 5. 其余正常放行
  return oulet
}

export default BeforeRouterEnter
